<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <f:view>
        <h:head>
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <link href="#{request.contextPath}/resources/css/style.css" rel="stylesheet" type="text/css" />
            <title>RBH-Visanyee</title>
        </h:head>

        <h:body>
            <pe:layout id="layoutId" stateCookie="false" widgetVar="fpLayoutWidget">
                <pe:layoutPane position="north" id="north"/>
                <pe:layoutPane position="center">
                    <pe:layoutPane position="north">
                        <f:facet name="header">
                            <h:outputText value="Center-North"/>
                        </f:facet>
                        Refresh this page to see that the state of all panes is preserved
                    </pe:layoutPane>
                    <pe:layoutPane position="center">
                        <f:facet name="header">
                            <h:outputText value="Center-Center"/>
                        </f:facet>
                        <p:messages id="msg" showDetail="true" showSummary="true">
                            <p:effect type="pulsate" event="load" delay="0">
                                <f:param name="mode" value="'show'"/>
                                <f:param name="times" value="'1'"/>
                            </p:effect>
                        </p:messages>
                    </pe:layoutPane>
                </pe:layoutPane>
                <pe:layoutPane position="west">
                    <pe:layoutPane position="north">
                        West-North
                    </pe:layoutPane>
                    <pe:layoutPane position="center">
                        West-Center
                    </pe:layoutPane>
                    <pe:layoutPane position="south">
                        West-South
                    </pe:layoutPane>
                </pe:layoutPane>
                <pe:layoutPane position="east">
                    East
                </pe:layoutPane>
                <pe:layoutPane position="south">
                    South
                </pe:layoutPane>

            </pe:layout>
        </h:body>
    </f:view>
</html>